<template>
  <div class="setting">
    <div class="leftCol">
      <div class="settingMainHeader">设置</div>
      <ul class="setting-aside">
        <li v-for="(item,index) in settingList" :key="index" :class="{activeColor:activeName===item.name}"
          @click="handleClick(item)"
        >
          {{item.name}}
        </li>
      </ul>
    </div>
    <div class="contentCol">
      <compoent :is="componentSrc"></compoent>
    </div>
  </div>
</template>

<script>
  import Info from "../components/Info";
  //import Upload from "../components/Upload";
  import History from "../components/History";
    export default {
        name: "setting",
      components:{
          Info,
        History
        //Upload

      },
      data(){
          return{
            settingList:[{
              name:'个人信息',path:'Info'},
              {name:'历史记录',path: 'History'}
              //{name:'修改图像',path:'Upload'}

            ],
            activeName:'个人信息',
            componentSrc:'Info',

          }
      },
      methods:{
          handleClick(item){
            this.activeName=item.name;
            this.componentSrc=item.path;
          }
      }

    }
</script>

<style lang="scss" scoped>
@import '../assets/css/setting';
</style>